<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta name="referrer" content="no-referrer"/>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客管理</title>
  <link href="../static/images/favicon.ico" th:href="@{/images/favicon.ico}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"  />
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../static/css/element-ui-index.css" th:href="@{/css/element-ui-index.css}">

</head>
<body class="admin-body">

  <div id="app">
    <!--顶部栏-->
    <div class="container-fluid p-1 bg-dark text-white text-center">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/admin">添加博客</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/admin/manageBlog">管理博客</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/admin/sys-configs">配置信息管理</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/admin/tags">标签管理</a>
        </li>
      </ul>
    </div>


    <!--列表-->
    <div class="container mt-5">
      <div class="card">
        <div class="card-body">
          <!-- 添加按钮 -->
          <el-button class="mb-3" type="primary" plain  @click="clickAdd">添加标签</el-button>

          <el-table
                  :data="list"
                  stripe
                  border
                  style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="150">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="参数名">
            </el-table-column>

            <el-table-column
                    prop="description"
                    label="描述">
            </el-table-column>

            <el-table-column
                    prop="value"
                    label="参数值">
              <template slot-scope="scope">
                {{ scope.row.value.length > 50 ? scope.row.value.substring(0, 50) + '...' : scope.row.value }}
              </template>
            </el-table-column>

            <el-table-column
                    prop="createTime"
                    label="创建时间">
            </el-table-column>

            <el-table-column
                    prop="updateTime"
                    label="更新时间">
            </el-table-column>

            <el-table-column width="150" label="操作" >
              <template slot-scope="scope">
                <el-button  size="mini" @click="clickEdit(scope.row.id)">编辑</el-button>
                <el-button  size="mini" type="danger" @click="clickDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>

          <!-- 分页 -->
          <el-pagination
                  class="mt-5"
                  @current-change="handleCurrentChange"
                  :current-page="searchForm.pageNum"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="searchForm.pageSize"
                  :total="total"
          ></el-pagination>
        </div>
      </div>

    </div>


    <!-- 创建或编辑的表单 -->
    <el-dialog title="添加/编辑" :visible="dialogVisible" @close="dialogVisible = false" :close-on-click-modal="false">
      <!-- 表单内容 -->
      <el-form :model="editForm" label-width="150px">
        <!-- ID -->
        <el-form-item label="ID">
          <el-input v-model="editForm.id" disabled></el-input>
        </el-form-item>

        <el-form-item label="参数名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input v-model="editForm.description"></el-input>
        </el-form-item>

        <el-form-item label="参数值" prop="value">
          <el-input
                  type="textarea"
                  :rows="8"
                  placeholder="请输入内容"
                  v-model="editForm.value">
          </el-input>
        </el-form-item>

      </el-form>
      <!-- 按钮操作 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="clickSave">保存</el-button>
      </span>

    </el-dialog>

  </div>
</body>

  <script src="../../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
  <!-- import Vue before Element -->
  <script src="../../static/lib/vue.js"                   th:src="@{/lib/vue.js}"></script>
  <!-- import JavaScript -->
  <script src="../../static/lib/element-ui-index.js"      th:src="@{/lib/element-ui-index.js}"></script>
  <script src="../../static/lib/axios.min.js"             th:src="@{/lib/axios.min.js}"></script>
  <script src="../../static/lib/axiosInstance.js"         th:src="@{/lib/axiosInstance.js}"></script>

  <script>
      new Vue({
        el: '#app',
        data: function() {
          return {
            list: [],
            total: 0, // 总记录数
            searchForm: {
              pageNum: 1, // 当前页
              pageSize: 10  // 每页显示条数
            },
            // 表单显示
            dialogVisible: false,
            formLabelWidth: '120px',
            editForm:{

            },

          }

        },
        methods:{
          //获取分页数据
          fetchPage(){
            axiosInstance.get(`/admin/sys-configs/page`,{
              params: this.searchForm
            }).then(res => {
              if (res.code === 20000){
                this.list = res.data.page.list;
                this.total = res.data.page.total;
              }

            })
          },
          // 分页切换
          handleCurrentChange(currentPage) {
            this.searchForm.pageNum = currentPage;
            this.fetchPage();
          },
          clickAdd(){
            this.editForm = {}
            this.dialogVisible = true
          },
          clickSave(){
            if (this.editForm.id) {
              // 有ID  更新
              axiosInstance.put(`/admin/sys-configs`, this.editForm)
                      .then(resp => {
                        if(resp.code === 20000){
                          this.$message.success('更新成功');
                          this.dialogVisible = false;
                          this.fetchPage();
                        }

                      })
                      .catch(error => {
                        console.error(error);
                      });
            } else {
              // 无ID  创建
              axiosInstance.post('/admin/sys-configs', this.editForm)
                      .then(resp => {
                        if(resp.code === 20000){
                          this.$message.success('创建成功');
                          this.dialogVisible = false;
                          this.fetchPage();
                        }
                      })
                      .catch(error => {
                        console.error(error);
                      });
            }
          },
          // 编辑
          clickEdit(id) {
            axiosInstance.get(`/admin/sys-configs/${id}`)
                    .then(resp => {
                      this.editForm = resp.data.sysConfig
                    })

            this.dialogVisible = true;
          },
          //点击删除
          clickDelete(id){
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
              cancelButtonText: '取消',
              confirmButtonText: '确定',
              type: 'warning'
            }).then(() => {
              this.delete(id)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            })
          },
          // 删除
          delete(id) {
            axiosInstance.delete(`/admin/sys-configs/${id}`)
                    .then(() => {
                      this.fetchPage();
                    })
                    .catch(error => {
                      console.error(error);
                    });
          },
          logout(){
            axiosInstance.get('/admin/logout').then(res => {
              if (res.code === 20000){
                location.href = "/admin";
              }
            })
          }

        },

        mounted(){
          this.fetchPage()
        }
      })



  </script>

</html>
